<template>
    <div id="tou">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>
                1
            </van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
        </van-swipe>

        <div class="ss">
            <div class="s"> <van-icon name="column" /><br>
                特色课</div>
            <div class="s"> <van-icon name="column" /><br>
                特色课</div>
            <div class="s"> <van-icon name="column" /><br>
                特色课</div>
        </div>
        <p>资深讲师</p>
        <div class="js">
            <div><img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt=""></div>
            <div>
                <p>谢文</p>
                <p>全栈开发</p>
            </div>
        </div>
        <div class="js">
            <div><img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt=""></div>
            <div>
                <p>谢文</p>
                <p>全栈开发</p>
            </div>
        </div>
        <div class="js">
            <div><img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt=""></div>
            <div>
                <p>谢文</p>
                <p>全栈开发</p>
            </div>
        </div>
        <div class="js">
            <div><img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt=""></div>
            <div>
                <p>谢文</p>
                <p>全栈开发</p>
            </div>
        </div>
        <div class="js">
            <div><img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt=""></div>
            <div>
                <p>谢文</p>
                <p>全栈开发</p>
            </div>
        </div>
    </div>
</template>
    
<script>

export default {
    // 变量 
    data() { return {} },
    // 事件
    methods: {},
    // 计算属性
    computed: {},
    // 监听器
    watch: {},
    // 过滤器
    filters: {},
    // 自定义指令
    directives: {},
    mounted() { },
}
</script>
<style scoped>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;

}

.s {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    padding: 10px;
    background: #fff;

}

.ss {
    display: flex;
    position: relative;
    top: -20px;
    justify-content: space-around;
}
.js{
    width: 100%;
    height: 100px;
    display: flex;
    background-color: #fff;
    margin-top: 10px;
    border-radius: 10px;

}
.js img{
width: 80px; 
height: 80px;
}
#tou{
    
  background: #eeeded;
}
p{
    text-align: left;
}

</style>